<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            /*
            * attr() 不推荐操作 checked、readOnly、selected、disable
            * prop() 只推荐操作 checked、readOnly、selected、disable
            * */
            //attr 设置或返回被选元素的属性值
            alert( $(":checkbox:first").attr("name") ); // 获取
            $(":checkbox:first").attr("name","abc") ; // 设置

            //prop 获取在匹配的元素集中的第一个元素的属性值
            $(":checkbox").prop("checked",true );//使复选框全选

            //attr() 自定义属性
            $(":checkbox:first").attr("abc","abcValue");//自定义属性abc 值为abcValue
            alert( $(":checkbox:first").attr("abc") );//值为abcValue


            /*------------------文档处理------------------*/
            //将<h1>标题</h1>添加到div内部最前面，成为div的子分支
            $("<h1>标题</h1>").prependTo( $("div") );

            //<h1>标题</h1>添加到div标签后面，成为div后面的一个兄弟分支
            $("<h1>标题</h1>").insertAfter("div");
            //<h1>标题</h1>添加到div标签前面，成为div前面的一个兄弟分支
            $("<h1>标题</h1>").insertBefore( $("div") );

            //用div替换掉<h1>标题</h1>
            $("<h1>标题</h1>").replaceWith("div");
            //用<h1>标题</h1>替换掉div
            $("div").replaceWith( $("<h1>标题</h1>") );
            //用<h1>标题</h1>替换掉所有的div
            $("<h1>标题</h1>").replaceAll( "div" );

            //把div中所有的元素删除，但是div标签还在
            $("div").empty();
            //把div整个都删除，div都不在
            $("div").remove();
            //将id为one的div全部删除
            $("div").remove("#one");
        });


    </script>
</head>
<body>
<body>
    <br/>
    多选：
    <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <br/><br/>
    <div id="one">1234</div>
    <div>1234</div>
</body>
</body>
</html>